<template>
  <Content title="自检报废填报">
    <view class="device-details">
      <view class="content">
        <view class="main-box">
          <u-form
            labelPosition="left"
            :model="model"
            labelWidth="100"
            labelAlign="left"
            :rules="rules"
            ref="uForm"
          >
            <view class="info-box">
              <view class="title">
                <text class="txt u-line-1">工单号 {{ id }}</text>
                <view class="tag-box">
                  <u-tag
                    shape="circle"
                    :text="data.state"
                    :borderColor="getColor(data.state)"
                    :bgColor="getColor(data.state)"
                  ></u-tag>
                </view>
              </view>

              <view class="text-box">
                <text class="label">产品编号:</text>
                <text class="value">{{ data.materialCode }}</text>
              </view>
              <view class="text-box">
                <text class="label">产品名称:</text>
                <text class="value">{{ data.materialName }}</text>
              </view>
              <view class="text-box">
                <text class="label">模具编号:</text>
                <text class="value">{{ data.moldCode }}</text>
              </view>
              <view class="text-box">
                <text class="label">模具名称:</text>
                <text class="value">{{ data.moldName }}</text>
              </view>
              <view class="text-box">
                <text class="label">计划数量:</text>
                <text class="value">{{ data.planProduceQuantity }}</text>
              </view>
              <view class="text-box">
                <text class="label">生产数量:</text>
                <text class="value">{{ data.produceQuantity }}</text>
              </view>
              <!-- <view class="text-box">
                <text class="label">合格数量:</text>
                <text class="value">{{ data.qualifiedQuantity }}</text>
              </view> -->
              <view class="text-box">
                <text class="label">报废数量:</text>
                <text class="value">{{ data.scrapQuantity }}</text>
              </view>
              <view class="text-box">
                <text class="label">产品单重:</text>
                <text class="value">{{ data.weight }}</text>
              </view>
              <view class="text-box">
                <text class="label">重量单位:</text>
                <text class="value">{{ data.weightUnit }}</text>
              </view>
            </view>

            <view class="info-box">
              <view class="title">
                <text class="txt"
                  ><i style="color: red; margin-right: 10px">*</i>处理类型</text
                >
              </view>
              <view class="text-box" style="margin-bottom: 0">
                <u-form-item label="" prop="reportedQuantity">
                  <u-radio-group
                    v-model="model.checkType"
                    @change="groupChange"
                  >
                    <u-radio
                      label="不良"
                      name="不良"
                      style="margin-right: 20px"
                    ></u-radio>
                    <u-radio label="报废" name="报废"></u-radio>
                  </u-radio-group>
                </u-form-item>
              </view>
            </view>

            <view class="info-box">
              <view class="title">
                <text class="txt"
                  ><i style="color: red; margin-right: 10px">*</i
                  >{{ model.checkType }}原因</text
                >
              </view>
              <view class="text-box all-width">
                <u-form-item label="" prop="outReason" style="width: 100%"
                  ><!-- required -->
                  <u-radio-group v-model="model.outReason">
                    <u-radio
                      v-for="(item, index) in checkTypeList"
                      :key="index"
                      :label="item.value"
                      :name="item.value"
                    ></u-radio>
                  </u-radio-group>
                </u-form-item>
              </view>
            </view>

            <view class="info-box">
              <view class="title">
                <text class="txt"
                  ><i style="color: red; margin-right: 10px">*</i>不良项</text
                >
              </view>
              <view
                class="text-box"
                v-for="(item, index) in ngList"
                :key="index"
              >
                <text class="label">{{ item.ngCode }}:</text>
                <view class="value">
                  <u-form-item label="" prop="ngNnumber">
                    <u-input
                      label
                      v-model="item.ngNnumber"
                      type="number"
                      @blur="keyUp($event, index, true)"
                      placeholder="请填写"
                      clearable
                    ></u-input>
                  </u-form-item>
                </view>
              </view>
            </view>
            <view class="info-box">
              <view class="title">
                <text class="txt">其他信息</text>
              </view>

              <view class="input-box">
                <u-form-item label="班次时间:" prop="shiftTime" required>
                  <MyDate
                    @change="getShiftList"
                    v-model="model.shiftTime"
                    placeholder="请选择"
                  ></MyDate>
                </u-form-item>
              </view>

              <view class="input-box">
                <u-form-item label="班次:" prop="shift" required>
                  <uni-data-select
                    v-model="model.shift"
                    :localdata="shiftList"
                    placeholder="请选择"
                  ></uni-data-select>
                </u-form-item>
              </view>

              <template>
                <view class="input-box">
                  <u-form-item
                    label="提报方式:"
                    prop="reportingMethod"
                    required
                  >
                    <uni-data-select
                      v-model="model.reportingMethod"
                      :localdata="reType"
                      placeholder="请选择"
                    ></uni-data-select>
                  </u-form-item>
                </view>
                <view class="input-box">
                  <u-form-item
                    :label="`报废${
                      model.reportingMethod == '按重量' ? '重量' : '数量'
                    }:`"
                    prop="outNumTotal"
                  >
                    <u-input
                      label
                      v-model="model.outNumTotal"
                      readonly
                      clearable
                    ></u-input>
                  </u-form-item>
                </view>
              </template>

              <view class="input-box">
                <u-form-item label="备注:" prop="remarks">
                  <u-textarea
                    v-model="model.remarks"
                    placeholder="请输入备注信息"
                  ></u-textarea>
                </u-form-item>
              </view>
            </view>

            <view class="info-box">
              <view class="title">
                <text class="txt u-line-1">添加图片（选填，最多5张）</text>
              </view>
              <view class="text-box">
                <!-- <text class="label">填报数量:</text> -->
                <view class="value">
                  <MyUpload
                    v-model="fileList"
                    multiple
                    :maxCount="5"
                  ></MyUpload>
                </view>
              </view>
            </view>
          </u-form>
        </view>
      </view>

      <view class="btn-v">
        <view class="but-box">
          <u-button
            class="btn"
            @click="toPath"
            type="primary"
            text="历史记录"
          ></u-button>
          <u-button
            class="btn"
            type="primary"
            @click="submit"
            text="提交"
          ></u-button>
          <!-- <u-button class="btn" type="primary" text="完成"></u-button>
          <u-button class="btn" type="primary" text="开始"></u-button> -->
        </view>
      </view>
    </view>
  </Content>
</template>

<script>
import Content from "@/components/content/index";
import fetch from "@/utils/fetch";
import MyDate from "@/components/myDate.vue";
import MyUpload from "@/components/myUpload";
export default {
  components: {
    Content,
    MyDate,
    MyUpload,
  },
  data() {
    return {
      id: "",
      model: {
        checkType: "报废",
        outReason: "",
        outNumTotal: 0,
        shift: "",
        shiftTime: this.$dayjs(new Date()).format("YYYY-MM-DD"),
        reportingMethod: "按数量",
      },
      outReason: "",
      rules: {
        shift: {
          required: true,
          message: "请填写",
          trigger: ["blur", "change"],
        },
        shiftTime: {
          required: true,
          message: "请填写",
          trigger: ["blur", "change"],
        },
        outReason: {
          required: true,
          message: "请填写",
          trigger: ["blur", "change"],
        },
        reportingMethod: {
          required: true,
          message: "请填写",
          trigger: ["blur", "change"],
        },
      },
      navIndex: 0,
      type: "1",
      data: {},
      checkTypeList: [],
      reType: [
        {
          text: "按重量",
          value: "按重量",
        },
        {
          text: "按数量",
          value: "按数量",
        },
      ],
      fileList: [],
      shiftList: [],
      poorList: [],
      userList: [],
      ngList: [],
    };
  },
  watch: {
    ngList: {
      deep: true,
      handler() {
        this.getAllNum();
      },
    },
  },
  onLoad: function (option) {
    //option为object类型，会序列化上个页面传递的参数
    this.id = option.workOrder;
  },
  onReady: function () {
    this.getList();
    this.getDictData(this.checkType);
    this.getPoorList();
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    if (this.$refs.uForm) this.$refs.uForm.setRules(this.rules);
  },
  onShow: function () {},
  computed: {},
  mounted() {
    // this.getPersonList();//操作工列表
  },
  methods: {
    keyUp(e, index, money) {
      if (!this.ngList[index].ngNnumber) {
        return (this.ngList[index].ngNnumber = 0);
      }
      let num = "";
      if (money) {
        num = this.ngList[index].ngNnumber.match(/^\d*(\.?\d{0,2})/g)[0];
      } else {
        num = this.ngList[index].ngNnumber
          .replace(/^[^\d]+$/g, "")
          .split(".")[0];
      }
      this.$set(this.ngList[index], "ngNnumber", num - 0);
    },
    toPath() {
      uni.navigateTo({
        url:
          "/pages/staging/sel-inspection-scrapping/reporting-records?workOrder=" +
          this.id,
        animationType: "pop-in",
      });
    },
    getColor(item2) {
      return item2 == "待排产"
        ? "#E5963A"
        : item2 == "已排产"
        ? "#998BF2"
        : item2 == "下发"
        ? "#6BBEE1"
        : item2 == "生产"
        ? "#73D8A6"
        : item2 == "中断"
        ? "#D48B3E"
        : item2 == "暂停"
        ? "#D8BE49"
        : item2 == "完成"
        ? "#4668E2"
        : item2 == "转产中"
        ? "#E794C9"
        : item2 == "转产完成"
        ? "#C25BC6"
        : item2 == "调机中"
        ? "#D8B2F2"
        : item2 == "调机完成"
        ? "#8698F6"
        : item2 == "拆模"
        ? "#EA709F"
        : "#31b099";
    },
    getList() {
      fetch("get", "/dms/mobile/selfCheckScrapWorkInfo", {
        workCode: this.id,
      }).then((res) => {
        this.data = res.data;
        this.model.shiftTime = this.$dayjs(new Date()).format("YYYY-MM-DD");
        this.getShiftList();
      });
    },
    //班次列表
    getShiftList() {
      const that = this;
      fetch("get", "/dms/mobile/getShiftList", {
        deviceNo: this.data.deviceCode,
        shiftDate: this.model.shiftTime,
      }).then((res) => {
        const now = that.$dayjs().format("YYYY-MM-DD") + " ";
        const newDate = that.$dayjs().format("YYYY-MM-DD HH:mm:ss");
        const now1 = that.$dayjs().add(1, "day").format("YYYY-MM-DD") + " ";
        that.shiftList = res.data.map((item) => {
          const startTime = now + item.shiftStartTime;
          let endTime = now + item.shiftEndTime;
          if (endTime < startTime) {
            endTime = now1 + item.shiftEndTime;
          }
          if (newDate > startTime && newDate < endTime) {
            that.model.shift = item.shift;
            that.model.shiftId = item.id;
          }
          return {
            ...item,
            value: item.shift,
            text: item.shift,
          };
        });

        if (!that.model.shift) {
          that.model.shift = that.shiftList[0].shift;
          that.model.shiftId = that.shiftList[0].id;
        }
      });
    },
    //操作员列表
    getPersonList() {
      fetch("get", "/dms/mobile/getUserNameList").then((res) => {
        this.userList = res.data;
      });
    },
    groupChange(name) {
      this.model.outReason = "";
      this.model.checkType = name;
      this.getDictData(name);
    },
    getDictData(name) {
      fetch("get", "/dms/faultCategory/dictList", {
        name: this.model.checkType,
      }).then((res) => {
        this.checkTypeList = res.data;
      });
    },
    getPoorList() {
      const that = this;
      this.ngList = [];
      fetch("get", "/dms/faultCategory/dictList", {
        name: "不良项",
      }).then((res) => {
        // that.$set(that.model,'outReason',null)
        for (let i = 0; i < res.data.length; i++) {
          that.ngList.push({
            ngNnumber: 0,
            ngCode: res.data[i].value,
          });
        }
      });
    },
    getAllNum() {
      let res = 0;
      for (let i = 0; i < this.ngList.length; i++) {
        res = this.ngList[i].ngNnumber - 0 + res;
      }
      this.model.outNumTotal = res;
    },
    submit() {
      const that = this;
      let data = {
        ...this.model,
        ngList: this.ngList,
        workCode: this.id,
        weight: this.data.weight,
        imagePath: that.fileList.map((item) => {
          return {
            ...item,
            fileName: item.fileName,
            filePath: item.url,
            fileUrl: item.url,
          };
        }),
      };
      if (!data.outReason) {
        uni.$emit("openToast", {
          type: "error",
          icon: "error",
          title: "请选择不良/报废原因",
        });
        return;
      }
      if (!data.outNumTotal && data.outNumTotal !== 0) {
        uni.$emit("openToast", {
          type: "error",
          icon: "error",
          title: "请输入不良项",
        });
        return;
      }
      this.$refs.uForm.validate().then((valid) => {
        if (valid) {
          that.$loading.open();
          fetch("post", "/dms/mobile/addWorkCheckSelf", data).then((data) => {
            that.$loading.close();
            uni.$emit("openToast", {
              type: "success",
              title: "申请成功",
              complete() {
                uni.navigateBack({
                  delta: 1,
                });
              },
            });
          });
        } else {
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.device-details {
  height: 100%;
  overflow: auto;
  padding-bottom: 150rpx;

  .content {
    min-height: 100%;
  }

  .title {
    font-size: 32rpx;
    margin-bottom: 20rpx;
    padding: 0 40rpx 20rpx 40rpx;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;

    .txt {
      flex: 1;
    }

    .tag-box {
      display: flex;
      align-items: center;
    }
  }

  .content-top {
    padding: 40rpx;

    .state {
      color: #f17a0a;
      margin-bottom: 20rpx;
    }
  }

  .info-box .text-box .label {
    width: 150rpx;
  }

  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60rpx;

    .label {
      margin: 0 20rpx;
    }
  }

  /deep/ {
    .u-radio-group--row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      flex-wrap: wrap;
    }

    .u-radio {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-right: 28px;
      margin-bottom: 10px;

      &:nth-child(2n) {
        margin-right: 28px;
      }
    }
  }
}

.label {
  margin: 0 20rpx;
}
</style>
